<script setup lang="ts">
import logo from "../../assets/images/logo.png";
import { useStore } from "@/stores";

const store = useStore();
const muneList = store.roleList;

const defaultActive = sessionStorage.getItem("defaultActive") || "";

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath);
};

const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath);
};
const selectMenu = (
  index: any,
  indexPath: any,
  item: any,
  routeResult: any
) => {
  // console.log(index, indexPath, item, routeResult);
  sessionStorage.setItem("defaultActive", index);
};
</script>

<template>
  <div class="app-menu">
    <h1 class="menu-head">
      <img :src="logo" alt="国信安logo" />
      <p>{{ store.systemName }}</p>
    </h1>
    <div class="user-info">
      <img
        class="user-info-img"
        src="../../assets/images/avatar-1.png"
        alt=""
      />
      <div class="user-info-name">
        <p>{{ store.user.username }}</p>
        <p>{{ store.user.departmentName }}</p>
      </div>
    </div>

    <div>
      <el-menu
        router
        :default-active="defaultActive"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        @select="selectMenu"
      >
        <MenuItem v-for="(item, index) in muneList" :key="index" :item="item" />
      </el-menu>
    </div>
  </div>
</template>

<style lang="scss">
@import "@/assets/scss/global.scss";

.menu-head {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid #efefef;

  img {
    width: 50px;
    height: auto;
  }

  p {
    padding-left: 10px;
    font-weight: 600;
  }
}

.user-info {
  display: flex;
  justify-content: center;
  padding: var(--el-menu-base-level-padding);

  .user-info-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  .user-info-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding-left: 10px;

    p {
      font-size: 14px;

      &:first-child {
        font-weight: 500;
      }

      &:last-child {
        font-size: 12px;
      }
    }
  }
}

.el-menu-item.is-active::before {
  position: absolute;
  top: 21px;
  right: 0;
  display: block;
  width: 2px;
  height: 14px;
  content: "";
  background-color: $color-theme;
}
</style>
